<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../favicon.ico">
    <link rel="stylesheet" href="../../assets/css/main.css?02">
</head>
<body>

<div class="layui-fluid x-body" id="app" v-cloak>

    <div class="layui-tab">
        <ul class="layui-tab-title" style="text-align: center">
            <li class="layui-this">上传文件</li>
            <li>传输文本</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!--Tab1-->

                <div class="layui-row" id="tzUpload">
                    <fieldset class="layui-elem-field">
                        <div class="layui-field-box" style="text-align: center">
                            <div class="layui-panel-window" style="width: 65%;margin: 0 auto;">
                                <label>/<input  v-model="path_sub" type="text" id="path_sub" style="width:50%" placeholder="自定义上传子目录" />/
                                </label>
                            </div>
                            <div class="layui-upload-drag" id="upload-file" style="width: 60%;">
                                <i class="layui-icon "></i>
                                <p>{{progress}}<br><br></p>
                                <div v-if="progress_show" class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="upload_pc">
                                    <div class="layui-progress-bar layui-bg-orange" lay-percent="0%"></div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field">
                        <legend style="font-size:11px;text-align: center">支持上传大文件|多选|拖拽</legend>
                        <div class="layui-field-box text-center">
                            <p class="text-small ">只需与B0Pass使用同一WIFI</p>
                            <p class="text-small ">充分发挥局域网最大带宽上传</p>
                            <p class="text-small ">多文件上传请用非微信浏览器</p>
                        </div>
                    </fieldset>
                </div>

            </div>
            <div class="layui-tab-item">
                <!--Tab2-->

                <div class="layui-row" >
                    <fieldset class="layui-elem-field">
                        <div class="layui-field-box" style="text-align: center">
                            <div class="" style="margin: 0 auto;">
                                <label>
                                    <textarea  v-model="data_text" @mouseout="setDataText()" type="text" id="data_text" style="width:100%;height:300px;" ></textarea>
                                </label>
                                <!--<button @click="setDataText()"> 提交 </button>-->
                            </div>
                        </div>
                    </fieldset>

                    <fieldset class="layui-elem-field">
                        <legend style="font-size:11px;text-align: center">使用说明</legend>
                        <div class="layui-field-box text-center">
                            <p class="text-small ">粘贴文本，多端共享，自动保存</p>
                        </div>
                    </fieldset>
                </div>
            </div>

        </div>
    </div>

</div>
<script type="text/javascript" src="../js/libs/jquery.min.js"></script>
<script type="text/javascript" src="../js/libs/layui/layui.js?1"></script>
<script type="text/javascript" src="../js/libs/vue/vue.min.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/javascript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/sync.js?01"></script>
<script>
    var APP = new Vue({
        el: '#app',
        data: {
            // datas for normal function upload
            normalUpload: {
                success: true,
                message: "上传失败."
            },

            // multiple image upload datas
            multiUpload: {
                imgs: []
            },

            // datas for advance function upload
            files: [],

            progress:"点击此处，上传文件",
            progress_show:false,
            path_sub:"",

            data_text:""

        },
        methods: {
            // 这里为了解决 vue 2.0 编译报错， 这个是 Vue 和传统 js 混用的一个 Bug
            // Vue 要求所有调用的方法都需要在 methods 定义
            // 但是其实 upload 方法是 layui 的，通过原生方式调用并不会报错。
            upload: function () {

            },
            setPathSub:function () {
                httpPost("/api/subpath",
                    {
                        'path':this.path_sub,
                        'code':"1"
                    },
                    function(result){

                    });
            },
            setDataText:function(){
                console.log("methods:textdata>>");
                httpPost("/api/textdata",
                    {
                        'data':this.data_text,
                        'code':"1"
                    },
                    function(result){
                        console.log("mounted:textdata:"+JSON.stringify(result.data));
                        syncSend("reload_text");
                    });
            }
        },
        mounted:function(){
            httpPost("/api/subpath",{},
                function(result){
                    APP.$data.path_sub=result.data;
            });
            console.log("mounted:textdata>>");
            httpPost("/api/textdata",{},
                function(result){
                    console.log("mounted:textdata:"+JSON.stringify(result.data));
                    APP.$data.data_text=result.data;
            });
        }
    });

    layui.use(['upload','element'], function () {
        var $ = layui.jquery
            ,upload = layui.upload
            ,layer = layui.layer
            ,element = layui.element
        ;

        //拖拽上传
        upload.render({
            elem: '#upload-file'
            , url: '/api/upload/'
            , accept: 'file'
            , multiple: true
            , field : "upload-file"
            , data:{
                path:function(){
                    return APP.path_sub;
                }
            }
            ,before: function(obj){
                //上传loading
                layer.load();
                APP.progress_show=true;
                APP.progress="正在上传，请稍候...";
            }
            , done: function (res,index) {
                APP.progress='文件'+index+'上传成功';
                console.log('文件'+index+'上传成功');
            },error: function(index){
                layer.msg('文件'+index+'上传失败');
            },allDone: function(obj){
                console.log(obj.total);
                console.log(obj.successful);
                console.log(obj.aborted);
                layer.closeAll('loading');
                APP.progress_show=false;
                APP.progress="上传完毕";
                messageOk('上传'+obj.total+'个文件，'+obj.successful+'上传成功');
                // 上传完成事件
                syncSend("reload");
                setTimeout(function () {
                    window.top.location.href="/?"+(new Date()).valueOf();
                },100);
            },progress: function(n){
                console.log("%"+n);
                var percent = n + '%'; //获取进度百分比
                element.progress('upload_pc', percent); //可配合 layui 进度条元素使用
            }
        });

    });

    function syncDo(data) {
        var msg=data.msg;
        console.log("[syncDo]"+msg);
        if(msg==='reload_text'){
            httpPost("/api/textdata","{}",
                function(result){
                    APP.$data.data_text=result.data;
            });
        }
    }


</script>
</body>

</html>